<template>
<div class="main_container">
  <!-- 容器 -->
  <div class="default_draw" id="draw"></div>
  <!-- 按钮 -->
    <button class="main3-btn submit" @click="toDraw" :disabled="submitLoading"></button>
  </div>
</template>

<script>
import "../assets/css/draw.css";
import { Draw } from "../assets/js/draw.js";

export default {
  name: "luckyDraw",
  props: ["list"],
  data() {
    return {
        submitLoading:false,
    };
  },
  mounted() {
    console.log('list', this.list);
    // 定义对象
    let draw = new Draw({// eslint-disable-line no-unused-vars
      list: this.list,
      id: "draw",
    });
    this.draw=draw;
  },
  methods: {
      toDraw(){
        this.$emit('getResult');  //调用父组件获取结果方法
        const result=this.$parent.result  //获取父组件结果
        // console.log('result11',result)
        this.submitLoading=true;
        const _this=this;
        this.draw.toDraw(result);
        // 弹窗出结果
        setTimeout(function () {
            if (result[0] == result[1] && result[1] == result[2]) {
                let txt=''
                _this.list.forEach((item,index)=>{
                    if(result[0]==index){   
                        txt=_this.list[index-1].title //第几个，所以要减1
                    }
                })
                // console.log('txt:' + txt);
                alert('恭喜获得' + txt);
            } else {
                alert('谢谢惠顾！');
            }
            _this.submitLoading=false;
        }, 2000);
      },
  },
};
</script>

<style scoped>
.main_container{
    width: 300px;
    margin: auto;
    position: relative;
}
.main3-btn{
    width: 140px;
    height: 46px;
    position: absolute;
    left: 60px;
    bottom: 37px;
    cursor: pointer;
    background: none;
    border: none;
}
</style>